.vbestui-tool-tip {
    display: inline-block;
    position: relative;
  }
  
  .vbestui-bubble {
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    width: 100%;
    z-index: 998;
  }
  
  .vbestui-triangle {
    width: 0px;
    height: 0px;
    border: solid;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent #585e6b transparent;
    position: absolute;
  }
  
  .vbestui-triangle-item {
    width: 0px;
    height: 0px;
    border: solid;
    position: absolute;
    left: -9px;
    top: 1px;
    border-width: 0px 9px 9px 9px;
    border-color: transparent transparent #fff transparent;
  }
  
  .vbestui-bubble-theme-dark {
    background: #585e6b;
    color: #fff;
  }
  
  .vbestui-bubble-theme-light {
    background: #fff;
    box-shadow: 0 0 2px var(--border-tint);
    color: var(--text-color);
  }
  
  [class*="vbestui-bubble-placement-bottom"] {
    margin-top: 12px;
  }
  
  [class*="vbestui-bubble-placement-top"] {
    bottom: calc(100% + 12px);
  }
  
  [class*="vbestui-bubble-placement-left"] {
    right: calc(100% + 18px);
  }
  
  .vbestui-bubble-placement-left {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .vbestui-bubble-placement-left-start {
    top: 0px;
  }
  
  .vbestui-bubble-placement-left-end {
    bottom: 0px;
  }
  
  [class*="vbestui-bubble-placement-right"] {
    left: calc(100% + 18px);
  }
  
  .vbestui-bubble-placement-right {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .vbestui-bubble-placement-right-start {
    top: 0px;
  }
  
  .vbestui-bubble-placement-right-end {
    bottom: 0px;
  }
  
  .vbestui-triangle-bottom {
    top: -10px;
    left: 0px;
    right: 0px;
    margin: auto;
  }
  
  .vbestui-triangle-bottom-start {
    top: -10px;
    left: calc(10%);
  }
  
  .vbestui-triangle-bottom-end {
    top: -10px;
    right: calc(10%);
  }
  
  [class*="vbestui-triangle-top"] {
    border-top-width: 10px;
    border-bottom-width: 0px;
    border-color: #585e6b transparent;
    bottom: -10px;
    left: 0px;
    right: 0px;
    margin: auto;
  }
  
  [class*="vbestui-triangle-item-top"] {
    border-width: 9px 9px 0px 9px;
    border-color: #fff transparent;
    bottom: 0px;
    top: -10px;
    left: -9px;
  }
  
  .vbestui-triangle-top-start {
    left: calc(-70%);
  }
  
  .vbestui-triangle-top-end {
    left: calc(70%);
  }
  
  [class*="vbestui-triangle-left"] {
    border-width: 10px 0px 10px 10px;
    border-color: transparent transparent transparent #585e6b;
    right: -10px;
  }
  
  [class*="vbestui-triangle-item-left"] {
    border-width: 9px 0px 9px 9px;
    border-color: transparent #fff;
    top: -9px;
    left: -10px;
  }
  
  .vbestui-triangle-left-start {
    top: 8px;
  }
  
  .vbestui-triangle-left-end {
    bottom: 8px;
  }
  
  [class*="vbestui-triangle-right"] {
    border-width: 10px 10px 10px 0px;
    border-color: transparent #585e6b transparent transparent;
    left: -10px;
  }
  
  [class*="vbestui-triangle-item-right"] {
    border-width: 9px 9px 9px 0px;
    border-color: transparent #fff;
    top: -9px;
    left: 1px;
  }
  
  .vbestui-triangle-right {
    top: 0px;
    bottom: 0px;
    margin: auto;
  }
  
  .vbestui-triangle-right-start {
    top: 8px;
  }
  
  .vbestui-triangle-right-end {
    bottom: 8px;
  }
  
  .tooltip-fade-enter-active {
    animation: baseFade 0.5s;
  }
  
  .tooltip-fade-leave-active {
    animation: baseFade 0.5s reverse;
  }